import React, { useState } from 'react';
import { Image, ImageViewer, ImageProps } from 'tdesign-react';
import './index.module.less';

interface IppeakImageProps {
  src: string;
  alt?: string;
  width?: number | string;
  height?: number | string;
  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
  preview?: boolean;
  placeholder?: React.ReactNode;
  error?: React.ReactNode;
  loading?: React.ReactNode;
  lazy?: boolean;
  shape?: 'circle' | 'round' | 'square';
  className?: string;
  style?: React.CSSProperties;
  onClick?: (e: React.MouseEvent) => void;
  onLoad?: (context: { e: any }) => void;
  onError?: (context: { e: any }) => void;
}

const IppeakImage: React.FC<IppeakImageProps> = ({
  src,
  alt = '',
  width = 100,
  height = 100,
  fit = 'cover',
  preview = true,
  placeholder,
  error,
  loading,
  lazy = false,
  shape = 'square',
  className = '',
  style,
  onClick,
  onLoad,
  onError,
  ...props
}) => {
  const [visible, setVisible] = useState(false);

  const handleClick = (e: React.MouseEvent) => {
    if (preview) {
      setVisible(true);
    }
    if (onClick) {
      onClick(e);
    }
  };

  const handleLoad = (context: { e: any }) => {
    if (onLoad) {
      onLoad(context);
    }
  };

  const handleError = (context: { e: any }) => {
    if (onError) {
      onError(context);
    }
  };

  const handleClose = () => {
    setVisible(false);
  };

  return (
    <>
      <div className={`sakura-image-container ${className}`} style={style}>
        <Image
          src={src}
          alt={alt}
          style={{ 
            width, 
            height, 
            cursor: preview ? 'pointer' : 'default' 
          }}
          fit={fit}
          placeholder={placeholder}
          error={error}
          loading={loading}
          lazy={lazy}
          shape={shape}
          onClick={handleClick}
          onLoad={handleLoad}
          onError={handleError}
        />
      </div>
      {preview && (
        <ImageViewer
          images={[src]}
          visible={visible}
          onClose={handleClose}
        />
      )}
    </>
  );
};

export default IppeakImage;
